<template>
    <div>
        <Button @click="getContent">getContent(观察console)</Button>
        <Button @click="toggleEle">toggleEle</Button>

        <p id="t1">
            1232qe
        </p>

        <hr>
        <input id="in1" type="text">
        <Button @click="setContent">setContent</Button>

    </div>
</template>
<!--
jQuery中封装了大量可以直接调用的交互逻辑;
Vue则需要用vue的特性手动去实现，就是造轮子；
若在vue项目里使用jQuery,则jQuery的事件不能被vue-devtools观察到；
但是在复杂的大型项目里适当使用Jquery还是有必要的,因为对于vue来说,Jquery就像手术刀一样精准地解决问题；


https://blog.csdn.net/weixin_40475396/article/details/79000818
如何用jquery获取<input id="test" name="test" type="text"/>中输入的值？
$(" #test ").val()
$(" input[ name='test' ] ").val()
$(" input[ type='text' ] ").val()
$(" input[ type='text' ]").attr("value")


https://www.cnblogs.com/skying555/p/4512407.html
html()方法

此方法类似于JavaScript中的innerHTML属性，可以用来读取或者设置某个元素中的HTML内容。要获取某个元素的内容，可以这样：

var p_html = $("p").html(); //获取p元素的HTML代码
如果需要设置某元素的HTML代码，那么也可以使用该方法，不过需要为它传递一个参数。例如要设置p元素的HTML代码，可以使用如下代码：

//设置p元素的HTML代码
$("p").html("欢迎您访问简明现代魔法图书馆～～");
注意：html()方法可以用于XHTML文档，但不能用于XML文档。

text()方法

此方法类似于JavaScript中的innerText属性，可以用来读取或者没置某个元素中的文本内容。继续使用以上的HTML代码，用text()方法对p元素进行操作：

var p_text = $("p").text(); //获取p元素的文本内容
与html()方法一样，如果需要为某元素设置文本内容，那么也需要传递一个参数。例如对p元素设置文本内容，代码如下：

// 设置p元素的文本内容
$("p").text("欢迎您访问简明现代魔法图书馆～～");
要注意下面两点：

JavaScript中的innerText属性并不能在Firefox浏览器下运行，而jQuery的text()方法支持所有的浏览器．

text()方法对HTML文档和XML文档都有效
-->
<script>
    import $ from 'jquery';

    export default {
        name: "DemoJq",
        methods: {
            getContent(){
                console.log($('#t1').text());
            },
            setContent(){
                if ($('#in1').val() !== undefined && $('#in1').val() !== ''){
                    $('#t1').text($('#in1').val())
                }else {
                    alert('input is null!')
                }
            },
            toggleEle() {
                $("#t1").toggle();
            }

        }
    }
</script>

<style scoped>

</style>